<script setup lang="ts">
import axios from "axios"
import { ref } from "vue";

/* 
    1.在setup中，要使用 await，需要封装一个 async 函数
    2.对list做数据的描述，告诉 TS 具体的数据类型，保证渲染时使用了 item.id 等属性不会报错
    3.axios不支持对返回的数据做校验，在 TS 中，建议使用 axios.request
        返回的数据是 res.data，需要对res.data做具体的类型描述，具体的描述需要根据后台返回什么类型，一一描写即可
*/

interface ListItem {
    id: number
    name: string
}

const list = ref<ListItem[]>([])

const getList = async () => {
    // js的写法,不支持对返回的数据做校验
    // const res = await axios({
    //     url: "http://geek.itheima.net/v1_0/channels"
    // })

    // ts的写法,支持对返回的数据做校验
    const res = await axios.request<{
        data: {
            channels: ListItem[]
        },
        message: string
    }>({
        url: "http://geek.itheima.net/v1_0/channels"
    })

    console.log(res.data);
    list.value = res.data.data.channels
    // res.data.data.channels[0].id
}
getList()

</script>

<template>
    <ul class="nav">
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
</template>

<style>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.nav {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow: auto;
}

.nav li {
    padding: 10px;
    flex-shrink: 0;
}

.nav li.active {
    border-bottom: 3px solid #f30;
}
</style>